<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"> </script>
		<script src="https://gitee.com/weisss1993/dsApp/raw/master/js/ajax.js"></script>
		<script src="html5plus://ready"></script>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<link rel="stylesheet" type="text/css" href="../css/test.css"/>
		<title></title>
		
		
	</head>
	<body>
		<div id="app">
			<div id="top">
				<span id="topCar">购物车</span>
				<span id="topClean">
					<van-button size="small" round type="danger" @click="clearCar">清空购物车</van-button>
				</span>
			</div>
			<div style="margin-top: 70px;"></div>
			<van-row v-for="(i,n) in shop" v-show="IsShow">
				<van-col span="2" id="check">
					<van-checkbox v-model="i.checked"></van-checkbox>
				</van-col>
				<van-col span="22">
					<van-card :num="i.buyCount" :price="i.RealPrice" :title="i.Name" :origin-price="i.MarketPrice">
						<div slot="footer">
							<van-stepper v-model="i.buyCount" :min="1" disable-input=true id="upDown"></van-stepper>
							<van-button size="mini" @click="del(i)">
								<van-icon name="delete" size="15px" />
							</van-button>
						</div>
						<div slot="thumb">
							<img src="i.GoodsImageUrl.src" onerror="javascript:this.src='../img/img.png';">
						</div>
					</van-card>
				</van-col>
			</van-row>
			<van-row v-show="IsShowNull">
				<van-col span="24" id="null">
					<van-icon name="cart-o" />
					<br />
					购物车空空如也
				</van-col>
			</van-row>
			<van-row v-show="IsShow" style="padding-top: 50px;">
				<van-col span=24"">
					<van-submit-bar :price="Prices" button-text="提交订单" @submit="pay">
						<van-checkbox v-model="checked" @click="all">全选</van-checkbox>
					</van-submit-bar>
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					checked: false,
					jsonData: {},
					shop: [],
					IsShow: true,
					IsShowNull: false,
					sum: 0
				},
				mounted: function() {
					var Name;
					var CoverImage;
					var RealPrice;
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						success: function(res) {
							for (var i = 0; i < 5; i++) {
								Name = res.Data[i].Name;
								CoverImage = res.Data[i].GoodsImageUrl.src;
								RealPrice = res.Data[i].RealPrice;
								vm.jsonData = {
									"Name": Name,
									"CoverImage": CoverImage,
									"RealPrice": RealPrice,
									"buyCount": vm.sum,
									"checked": false
								}
								vm.shop.push(vm.jsonData);
							}
							console.log(vm);
						},

					});
				},
				methods: {
					clearCar: function() {
						if (vm.IsShowNull == true) {
							this.$toast('购物车已清空');
						} else {
							this.$dialog.confirm({
								title: '提示',
								message: '确认清空购物车'
							}).then(() => {
								vm.IsShow = false;
								vm.IsShowNull = true;
							}).catch(() => {

							});
						}
					},
					pay: function() {
						plus.webview.open("pay.html", "pay");
					},
					all: function() {
						for (var i = 0; i < vm.shop.length; i++) {
							vm.shop[i].checked = vm.checked;
						}
					},
					del: function(i) {
						var index = vm.shop.indexOf(i);
						if (index > -1) {
							this.$dialog.confirm({
								title: '提示',
								message: '确认删除此商品？'
							}).then(() => {
								vm.shop.splice(index, 1);
							}).catch(() => {
							
							});
						}
					}
				},
				computed: {
					Prices: function() {
						this.sum = 0;
						for (var i = 0; i < this.shop.length; i++) {
							if (this.shop[i].checked == true) {
								this.sum += this.shop[i].RealPrice * this.shop[i].buyCount;
								console.log(this.sum);
							}
						}
						return this.sum * 100;
					}
				}
			});
		</script>
	</body>
</html>

